<!DOCTYPE html>
<html>
<head>
	<title>聊天</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="box">
		
	</div>
	<input type="text" id="ipt">
	<button id="send">发送</button>

	<script>
		let box = document.querySelector('#box') 
		let ipt = document.querySelector('#ipt') 
		let send = document.querySelector('#send')

		send.onclick = function() {
			let xhr = new XMLHttpRequest()
			xhr.open('GET','http://localhost:3001/send?msg='+ipt.value, true)
			xhr.onload = function() {
				//console.log(xhr.responseText)
			}
			xhr.send()
		}

		function checkMessage() {
			let xhr = new XMLHttpRequest()
			xhr.open('GET','http://localhost:3001/getMsg', true)
			xhr.onload = function() {
				console.log(this.responseText)
				appendMsg(this.responseText)
				checkMessage()
			}
			xhr.timeout = 10000000
			xhr.send()
		}

		function appendMsg(str) {
			let p = document.createElement('p')
			p.innerText = str
			box.appendChild(p)
		}
		checkMessage()


	</script>
</body>
</html>